<template>
  <div>
    <canvas ref="chartCanvas"></canvas>
  </div>
</template>

<script>
export default {
  name: 'PieChart',
  mounted() {
    this.createPieChart();
  },
  methods: {
    createPieChart() {
      const ctx = this.$refs.chartCanvas.getContext('2d');
      const data = {
        labels: ['A', 'B', 'C', 'D'],
        datasets: [{
          data: [10, 20, 30, 40],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)'
          ],
          borderWidth: 1
        }]
      };
      const options = {
        responsive: true,
        maintainAspectRatio: false
      };
      new Chart(ctx, {
        type: 'pie',
        data: data,
        options: options
      });
    }
  }
};
</script>

<style scoped>
div {
  width: 60%;
  height: 400px;
  margin: 0 auto;
}
</style>
